<template>
    <div class="login-box">
        <div class="login-main">
            <div class="login-logo">
                <img src="../assets/images/admin-logo.png" alt="">
            </div>

            <form>
                <div class="form-box">
                    <h4>运营管理系统</h4>
                    <div class="list-box">
                        <van-icon name="friends-o" />
                        <input type="text" placeholder="请输入账号">
                    </div>
                    <div class="list-box">
                        <van-icon name="friends-o" />
                        <input type="password" placeholder="请输入密码">
                    </div>
                    <div class="code-box">
                        <div class="list-box">
                            <input type="text" placeholder="请输入右侧验证码">
                        </div>
                        <div class="code"></div>
                    </div>
                    <div class="password">
                        <input type="checkbox" id="password">
                        <label for="password">记住密码</label>
                    </div>
                    <button>登录</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login"
    }
</script>

<style lang="scss" scoped>
    input::-webkit-input-placeholder {
        color: #fff;
    }
    input::-moz-input-placeholder {
        color: #fff;
    }
    input::-ms-input-placeholder {
        color: #fff;
    }
    .login-box {
        position: relative;
        width: 100%;
        height: 100vh;
        background-image: url("../assets/images/admin-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        .login-main {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 380px;
            transform: translate(-50%, -50%);

            .login-logo {
                width: 246px;
                margin: 0 auto 30px;

                img {
                    width: 100%;
                }
            }

            .form-box {
                width: 100%;
                height: 360px;
                padding: 20px 30px;
                background-color: rgba(0, 0, 0, 0.6);
                box-shadow: 0px 16px 36.8px 3.2px rgba(9, 23, 90, 0.2);
                color: #fff;
                h4{
                    font-size: 28px;
                    text-align: center;
                }
                .code-box{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .code {
                        width: 120px;
                        height: 42px;
                        margin-bottom: 14px;
                        margin-left: 10px;
                        background-color: #fff;
                    }
                }
                .list-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    height: 42px;
                    width: 100%;
                    margin-bottom: 14px;
                    padding: 0 20px;
                    background-color: rgba(255, 255, 255,0.4);
                    i{
                        margin-left: 10px;
                        font-size: 20px;
                    }
                    input{
                        flex: 1;
                        background-color: transparent;
                        font-size: 14px;
                    }
                }
                .password {
                    display: flex;
                    align-items: center;
                    margin-bottom: 24px;
                    color: #fff;
                    font-size: 14px;
                }
                >button{

                    width: 100%;
                    height: 42px;
                    background-color: rgb(0, 119, 213);
                    color: #fff;
                    font-size: 18px;
                }
            }

        }
    }
</style>
